<template>
  <div class="chart">
    <el-date-picker
      v-model="year"
      type="year"
      value-format="yyyy"
      :clearable="false"
      placeholder="选择年"
      @change="changeYear"
      style="width: 100px; left: 700px; margin-bottom: 20px; margin-top: 10px;"
    ></el-date-picker>
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { selectProjectCostByYear } from "@/service/financeApi.js"; //接口
export default {
  data() {
    return {
      year: "",
      seriesData: [],
    };
  },
  created() {
    let date = new Date();
    this.year = date.getFullYear() + "";
  },
  mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "项目类型支出折线图",
        left: "15%",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["市场", "管理类", "自研产品", "委托开发"],
        right: "5%",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {},
      //   },
      // },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [],
    };

    option && myChart.setOption(option);

    this.selectCost();
  },
  methods: {
    changeYear() {
      this.selectCost();
    },
    selectCost() {
      let data = {
        year: this.year,
      };
      // console.log(data);
      selectProjectCostByYear(data.year).then((res) => {
        if (res.code == 0) {
          let seriesDataList = [
            {
              name: "",
              type: "line",
              // stack: 'Total',
              data: [],
            },
          ];
          this.seriesData = res.data;
          let changeSeriesData = JSON.parse(JSON.stringify(this.seriesData));
          // console.log("changeSeriesData:   ", changeSeriesData);

          let seriesDatas = [];

          changeSeriesData.map((item, index) => {
            seriesDatas.push(
              Object.assign({}, item, {
                type: "line",
                // stack: 'Total',
              })
            );
          });
          // console.log("seriesDatas:   ", seriesDatas);
          seriesDataList = seriesDatas;
          // console.log("seriesDataList:   ", seriesDataList);
          this.darwLineWithHisOrderCountDate(seriesDataList);
        }
      });
    },
    //历史30天内每天所有订单总数变化--折线图
    darwLineWithHisOrderCountDate(seriesDataList) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["市场", "管理类", "自研产品", "委托开发"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "800px",
          height: "320px",
          // 防止标签溢出
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          name: "月份",
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          axisTick: {
            length: 6,
          },
          name: "支出费用/元",
          type: "value",
        },
        color: [
          "rgba(25, 98, 224, 1)",
          "rgba(2, 173, 130, 1)",
          "rgba(252, 139, 45, 1)",
          "rgba(250, 183, 15, 1)",
        ],
        series: seriesDataList,
      });
    },
  },
};
</script>
<style scoped>
#main {
  height: 400px;
}
.chart {
  width: 55%;
  border: 1px solid #ededed;
  float: left;
  margin-top: 20px;
}
</style>
